<template>
  <div class="page-card dhData">
    <h-query :showKey="[]" :query="query" @search="search">
      <!-- <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click="add">添 加</a-button> -->
      <div class="a-button-right flex">
        <UploadExcel :queryParams="queryParams" download="/web/Popularizing/write_Popularizing" @change="$refs.htable.refresh(true)" />
        <a-button type="primary" @click="add">添 加</a-button>
      </div>
    </h-query>
    <h-table
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="true"
      :zebraStripes="true">
      <span slot="type" slot-scope="{text}">
        {{ type[text] }}
      </span>
      <span slot="action" slot-scope="{text, record}">
        <a @click="edit(record)">编辑</a>
        <a-divider type="vertical"></a-divider>
        <a @click="remove(record)" class="red">删除</a>
      </span>
      <!-- <span slot="isHome" slot-scope="{text, record}">
        <a-switch v-model="record.isHome" @change="showHome(record)"></a-switch>
      </span>
      <span slot="isIndex" slot-scope="{text, record}">
        <a-switch v-model="record.isIndex" @change="showTop(record)"></a-switch>
      </span> -->
    </h-table>

    <createInfo ref="modal" v-model="show" @submit="submit" />
  </div>
</template>
<script>
// eslint-disable-next-line
import { getPopularizing, getPopularizingDetail, addPopularizing, deletePopularizing, editPopularizing } from '@/api/db';
import createInfo from './action/createInfo';
import UploadExcel from '@/components/UploadExcel/Index';

export default {
  components: {
    createInfo,
    UploadExcel
  },
  data() {
    return {
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '基地名称',
            dataIndex: 'baseName'
          },
          {
            align: 'center',
            title: '所在地',
            dataIndex: 'location'
          },
          {
            align: 'center',
            title: '特色亮点',
            dataIndex: 'characteristic'
          },
          {
            align: 'center',
            title: '所获荣誉',
            dataIndex: 'honor'
          },
          {
            align: 'center',
            title: '备注',
            dataIndex: 'remark',
            width: 300
          },
          {
            align: 'center',
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pagination: {
          total: 100,
          // showSizeChanger: true,
          // showQuickJumper: true,
          showTotal: total => `共 ${total} 条`
        }
      },
      form: {

      },
      type: {
        0: '个人',
        1: '企业'
      },
      query: [
        {
          key: 'baseName',
          type: 'input',
          label: '基地数据'
        }
      ],
      selectedRowKeys: [],
      selectedRow: [],
      show: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    getList(params) {
      // const { current, pageSize } = params;
      Object.assign(this.queryParams, params);
      getPopularizing(this.queryParams).then(res => {
        this.config.dataSource = res.data.records.map(e => {
          return {
            ...e
          };
        });
        this.config.pagination.total = res.data.total;
      });
    },
    search(params) {
      Object.assign(this.queryParams, params);
      this.$refs.htable.refresh();
    },
    add() {
      this.$refs.modal.add();
      this.show = true;
    },
    edit(row) {
      this.$refs.modal.edit(row);
      this.show = true;
    },
    submit() {
      this.$refs.htable.refresh();
    },
    remove({ id }) {
      const that = this;
      this.$confirm({
        title: '确定要删除吗？',
        onOk() {
          deletePopularizing({ id, isDelete: -1 }).then(res => {
            that.$message.success('删除成功');
            that.$refs.htable.refresh(true);
          });
        },
        onCancel() {
          console.log('Cancel');
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.dhData {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   isIndex: 0;
  // }
}
</style>
